<template>
    <h1>有key 无key的区别</h1>
    <!--有key 会跟随dom标签变化而变化  无key的话会固定到当前的dom标签上-->
    <div class="content">
        <div class="header" v-for="(item,index) in brands" >
            <input type="checkbox">
            <span class="title">{{ item.name }}</span>
            <span class="num">{{ item.price }}</span>
            <button class="btn" @click="remove(index)">删除</button>
        </div>
    </div>
    <hr>
    <!--v-for 列表渲染 语法：
        v-for='item in arrone' :key='唯一标识'
        v-for='(item,index )in arrone' :key='index'
    -->
    <div v-for="(item,index) in arrone" :key="index">{{ item }} --- {{ index }}</div>
    <p>学生姓名：</p>
    <ul>
        <li v-for="(item,index) in arr ">{{ item }} +++ {{ index }}</li>
    </ul>
    <p>学生详情：</p>
    <!--哪个标签需要循环就在哪个标签上写v-for-->
    <div v-for="obj in stuarr">
        <span>{{ obj.name }}</span>==
        <span>{{ obj.age }}</span>==
        <span>{{ obj.hobby }}</span>
    </div>
    <!--复杂的对象类型-->
    <div v-for="(value, key) in tobj" :key="key">
        {{ key }} : {{ value }}
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
const arrone = ref([1, 2, 3, 4, 5, 6])
const arr = ref(['王麻子', '白小纯', '萧炎'])
const stuarr = ref([
    { id: 101, name: '萧炎', age: 20, hobby: '侥幸而已' },
    { id: 102, name: '美杜莎', age: 120, hobby: '萧炎' },
    { id: 103, name: '萧薰儿', age: 18, hobby: '萧炎' },
    { id: 104, name: '小医仙', age: 20, hobby: '萧炎' },
])
//复杂的对象类型
const tobj = reactive({
    name: '药老',
    age:600,
    class:'药皇'
})
// 定义品牌数据
const brands = ref([
    { id: 101, name: '奔驰', price: '13.8' },
    { id: 102, name: '宝马', price: '15.8' },
    { id: 103, name: '奥迪', price: '13.8' },
    { id: 104, name: '小米', price: '21.8' },
    { id: 105, name: 'BYD', price: '7.99' },
    { id: 106, name: '别克', price: '10.99' }
])
const remove = (index) => { 
    // 打印传入的索引值
    console.log(index);

    // 从brands数组中移除指定索引的元素
    brands.value.splice(index, 1)
}
</script>

<style scoped>
.content{
    border: 1px solid red;
    .header{
        border: 2px solid rgb(237, 237, 241);
        .title{
            border: 1px solid black;
            margin-left: 10px;
        }
        .num{
            border: 1px solid black;
            margin-left: 10px;
        }
        .btn{
            margin-left: 10px;
        }
    }
}
</style>